<template>
	<div class="avatar-uploader">
		<el-upload action="" name="image" accept="image/jpeg,image/gif,image/png" :http-request="uploadHttp" :show-file-list="false"
		 :before-upload="beforeAvatarUpload">
			<img v-if="form.logo" :src="form.logo" class="avatar">
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		</el-upload>
	</div>
</template>

<script>
	export default {
		name: "uploadImg",
		props: ["imgs"],
		data() {
			return {
				dialogFormVisible: false,
				form: {
					logo: this.imgs
				}
			}
		},
		watch: {
			imgs: function(newVal, oldVal) {
				this.form.logo = newVal;
			}
		},
		methods: {
			uploadHttp: function(params) {
				const _file = params.file;
				var formData = new FormData();
				formData.append("image", _file);
				this.$axios.post("/activity/visitor/uploadimage", formData)
					.then(res => {
						// console.log("_RequestUploads_", res);
						this.$message({
							type: 'success',
							message: '图片上传成功!'
						});
						this.$emit('choiceImg', res.data.data.filename);
						this.form.logo = res.data.data.filename

					})
					.catch(function(err) {
						this.$message.error(err.response.data.message);
					});
			},
			// 上传图片验证
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
		},
		mounted() {
			// this.form.logo = this.imgs;
		}
	}
</script>

<style scoped lang="scss">
	@import '../styles/vars';
	/*@import '~scss_vars';*/

	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 178px;
		height: 178px;
	}

	.avatar-uploader:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
